<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>ZTREE DEMO</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
<script type="text/javascript" src="asyncData/demoData.js"></script>
<script type="text/javascript" src="demoTools.js"></script>
<SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;

		setting = {
			checkable: true,
			callback: {
				change:	zTreeOnChange
			}
		};

	$(document).ready(function(){
		refreshTree();

	});

	function zTreeOnChange(event, treeId, treeNode) {
		getCheckedNodesLength();
	}

	function getCheckBoxType() {
		var py = $("#py").attr("checked")? "p":"";
		var sy = $("#sy").attr("checked")? "s":"";
		var pn = $("#pn").attr("checked")? "p":"";
		var sn = $("#sn").attr("checked")? "s":"";
		
		var type = { "Y":py + sy, "N":pn + sn};
		return type;
	}

	function refreshTree() {
		var checkType = getCheckBoxType();
		setting.checkType = checkType;
		zTree1 = $("#treeDemo").zTree(setting, clone(zNodes));
		$("#checkTypeCode").html("{\"Y\":" + checkType.Y + ", \"N\":" + checkType.N + "}");
		getCheckedNodesLength();
	}

	function getCheckedNodesLength() {
		var tmp = zTree1.getCheckedNodes();
		$("#checkedNum").html(tmp.length);
		tmp = zTree1.getChangeCheckedNodes();
		$("#checkedChangeNum").html(tmp.length);
		if ($("#changeYes").attr("checked")) {
			for (var i=0; i<tmp.length; i++) {
				tmp[i].checkedOld = tmp[i].checked;
			}
		}
	}

  //-->
  </SCRIPT>
</HEAD>

<BODY>
	<center class="headTitle">CheckBox&nbsp;&nbsp;演示</center>
	<TABLE border=0 width="700" class="tb1">
		<TR>
			<TD width=340px align=center valign=top>
				<div class="zTreeDemoBackground">
					<ul id="treeDemo" class="tree"></ul>
				</div>
			</TD>
			<TD width=360px align=left valign=top>
				<div class="demoContent">
					<li class="title focus">
						<button class="ico star" onfocus="this.blur();"></button>CheckBox
						父子关系配置
						<ul class="remark">——修改以下配置，点击 Tree 的 CheckBox，看看变化
						</ul>
						<ul>
							&nbsp;&nbsp;&nbsp;&nbsp;CheckBox被选中时:&nbsp;
							<INPUT TYPE="checkbox" id="py" checked onchange="refreshTree();"
								onclick="refreshTree();" onfocus="this.blur();">影响父;&nbsp;&nbsp;
							<INPUT TYPE="checkbox" id="sy" checked onchange="refreshTree();"
								onclick="refreshTree();" onfocus="this.blur();">影响子
						</ul>
						<ul>
							CheckBox被取消选中时:&nbsp;
							<INPUT TYPE="checkbox" id="pn" checked onchange="refreshTree();"
								onclick="refreshTree();" onfocus="this.blur();">影响父;&nbsp;&nbsp;
							<INPUT TYPE="checkbox" id="sn" checked onchange="refreshTree();"
								onclick="refreshTree();" onfocus="this.blur();">影响子
						</ul>
						<ul class="event">
							<li>&nbsp;setting.checkable = <a id="checkableCode">true</a>;
							</li>
							<li>&nbsp;setting.checkType = <a id="checkTypeCode"></a>;
							</li>
							<li>&nbsp;</li>
							<li>&nbsp;被选择的节点共 <a id="checkedNum">0</a> 个
							</li>
							<li>&nbsp;当前被修改选择状态的节点共 <a id="checkedChangeNum">0</a> 个
							</li>
							<li>&nbsp;只计算每次check后修改状态的节点： <INPUT TYPE="radio"
								id="changeYes" name="changeRadio" checked onfocus="this.blur();"
								onclick="refreshTree();">Yes;&nbsp; <INPUT TYPE="radio"
								id="changeNo" name="changeRadio" onfocus="this.blur();"
								onclick="refreshTree();">No
							</li>
						</ul>
					</li>
					<li class="title focus">
						<button class="ico books" onfocus="this.blur();"></button>CheckBox
						状态说明
						<ul class="remark">
							<button type="BUTTON" class="treeButton checkbox_false_full"></button>
							当前节点没有被选择； 鼠标移到该节点上显示为：
							<button type="BUTTON"
								class="treeButton checkbox_false_full_focus"></button>
							<br /> &nbsp;&nbsp;&nbsp;
							<font style="color: #82ff65">如果是父节点，则没有被选择的子节点。</font>
						</ul>
						<ul class="remark">
							<button type="BUTTON" class="treeButton checkbox_false_part"></button>
							当前节点没有被选择； 鼠标移到该节点上显示为：
							<button type="BUTTON"
								class="treeButton checkbox_false_part_focus"></button>
							<br /> &nbsp;&nbsp;&nbsp;
							<font style="color: #fb7878">存在被选择的子节点（只有父节点存在此状态）。</font>
						</ul>
						<ul class="remark">
							<button type="BUTTON" class="treeButton checkbox_true_full"></button>
							当前节点被选择； 鼠标移到该节点上显示为：
							<button type="BUTTON" class="treeButton checkbox_true_full_focus"></button>
							<br /> &nbsp;&nbsp;&nbsp;
							<font style="color: #bcf8ff">如果是父节点，则全部子节点都被选择。</font>
						</ul>
						<ul class="remark">
							<button type="BUTTON" class="treeButton checkbox_true_part"></button>
							当前节点被选择； 鼠标移到该节点上显示为：
							<button type="BUTTON" class="treeButton checkbox_true_part_focus"></button>
							<br /> &nbsp;&nbsp;&nbsp;
							<font style="color: #fb7878">存在没有被选择的子节点（只有父节点存在此状态）。</font>
						</ul>
					</li>
				</div>
			</TD>
		</TR>
	</TABLE>
</BODY>
</HTML>
